<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" >
    <title>中石化加油卡充值</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/custom.css"/>
    <link rel="stylesheet" href="css/testOilPay.css"/>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/tools.js"></script>
    <script src="js/testOilPay.js"></script>
    <script>
        var $cardid = "";
        var $sign = "";
        var $orderid = "";
        var $payType = "";//充值的类型，0代表任意充值，1代表直充
        var $oilPayResult = "";//充值Interval
        window.onload = function () {
            init();
        }
    </script>
</head>
<body>
    <div style="width: 100%;height: auto;position: absolute;top: 0px;z-index: 999;background-color: #ffffff;border-bottom: 2px #DFDDD8 solid;">
        <div class="container">
            <div class="row myrow" style="margin-top: 20px;">
                <div class="col-xs-5 mycol-xs-5">
                    <span style="font-size: 18px;">充值套餐</span>
                </div>
                <div id="mySelect" class="col-xs-7 mycol-xs-7">
                    <div class="btn-group" style="width: 100%;">
                        <button class="myDropdown" id="dropdown" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            -请选择-&nbsp;&nbsp;<span class="caret"></span>
                        </button>
                        <ul id="mySelectList" class="dropdown-menu" role="menu" style="padding-left: 5px;font-size: 18px;max-height: 200px;overflow-y: auto;">
                            <li value="1" cardid="64127500" style="margin: 5px 0 5px 0;">任意充</li>
                            <li value="2" cardid="64157002" style="margin: 5px 0 5px 0;">490充500</li>
                            <li value="3" cardid="64157001" style="margin: 5px 0 5px 0;">980充1000</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row myrow">
                <div class="col-xs-5 mycol-xs-5">
                    <span style="font-size: 18px;">充值金额</span>
                </div>
                <div class="col-xs-7 mycol-xs-7">
                    <input id="cardnum" type="text" style="width: 100%;font-size: 18px;" readonly="readonly" />
                </div>
            </div>
            <div class="row myrow">
                <div class="col-xs-5 mycol-xs-5">
                    <span style="font-size: 18px;">加油卡卡号</span>
                </div>
                <div class="col-xs-7 mycol-xs-7">
                    <input id="game_userid" type="text" placeholder="请输入" style="width: 100%;font-size: 18px;" />
                </div>
            </div>
            <div class="row myrow">
                <div class="col-xs-5 mycol-xs-5">
                    <span style="font-size: 18px;">持卡人姓名</span>
                </div>
                <div class="col-xs-7 mycol-xs-7">
                    <input id="gasCardName" type="text" placeholder="请输入" style="width: 100%;font-size: 18px;" />
                </div>
            </div>
            <div class="row myrow">
                <div class="col-xs-5 mycol-xs-5">
                    <span style="font-size: 18px;">持卡人手机号</span>
                </div>
                <div class="col-xs-7 mycol-xs-7">
                    <input id="gasCardTel" type="text" placeholder="请输入" style="width: 100%;font-size: 18px;" />
                </div>
            </div>
            <div class="row myrow">
                <div class="col-xs-5 mycol-xs-5">
                    <span style="font-size: 18px;">支付金额</span>
                </div>
                <div class="col-xs-7 mycol-xs-7">
                    <input id="ordercash" type="text" style="width: 100%;font-size: 18px;" readonly="readonly"/>
                </div>
            </div>
            <div class="row" style="margin-top: 15px;margin-bottom: 20px;">
                <div class="col-xs-12">
                    <img src="img/oilPay.png" style="width: 100%;" onclick="checkOilCard();">
                </div>
            </div>
        </div>
    </div>

    <div id="myOilCard" style="border-radius: 5px;width: 90%;margin-left: 5%;text-align: center;position: absolute;top: 20%;z-index: 20000;background-color: #ffffff;display: none;-webkit-animation: dialogAnimate .5s;">
        <div style="width: 100%;margin-top: 20px;">
            <span style="font-size: 25px;color: #41CEF1;font-weight: bolder;">请确认加油卡号信息</span>
        </div>
        <div style="width: 100%;margin-top: 30px;">
            <div style="width: 40%;float: left;font-size: 15px;text-align: left;padding-left: 5%;">
                <span>持卡人姓名</span>
            </div>
            <div style="width: 60%;float: right;font-size: 15px;text-align: right;padding-right: 5%;">
                <span id="oilCardName">******</span>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div style="width: 100%;margin-top: 20px;">
            <div style="width: 40%;float: left;font-size: 15px;text-align: left;padding-left: 5%;">
                <span>加油卡卡号</span>
            </div>
            <div style="width: 60%;float: right;font-size: 15px;text-align: right;padding-right: 5%;">
                <span id="oilCardNum">******</span>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div style="width: 100%;margin-top: 20px;margin-bottom: 20px;">
            <div style="width: 50%;float: left;">
                <button style="width: 90%;padding: 5px;background-color: #41CEF1;border-width: 0px;border-radius: 5px;font-size: 18px;color: #ffffff;" onclick="$('#myOilCard').css({'display':'none'});shieldFade();">取消</button>
            </div>
            <div style="width: 50%;float: right;">
                <button style="width: 90%;padding: 5px;background-color: #41CEF1;border-width: 0px;border-radius: 5px;font-size: 18px;color: #ffffff;" onclick="oilPay();">确认</button>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div style="width: 100%;height: 100%;position: absolute;top: 0px;background-color: #f7f8f8;z-index: 998;">
        <div style="width: 100%;position: absolute;bottom: 8%;text-align: center;">
            <img src="img/logo.png" style="width: 100%;">
        </div>
    </div>
</body>
</html>